import React, { PureComponent } from "react";
import { Map, Markers, Marker } from "react-amap";
import CarallDialog from "pages/vehicle/components/vehicle-dialog/CarallDialog";

const randomPosition = () => ({
  longitude: 100 + Math.random() * 20,
  latitude: 30 + Math.random() * 20
});
const randomMarker = len =>
  Array(len)
    .fill(true)
    .map((e, idx) => ({
      position: randomPosition()
    }));

class JMap extends PureComponent {
  constructor() {
    super();
    this.state = {
      activeMarker: {},
      markers: randomMarker(1000),
      center: { longitude: 108.54, latitude: 34.16 },
      carDialogVisible: false,
      selectCarList: [],
      selectCarObj: { pos: [] }
    };
    this.randomMarkers = this.randomMarkers.bind(this);
    this.markerEvents = {
      click: e => {
        let selectobj = this.state.selectCarList.filter(
          element =>
            element.pos[0].toFixed(4) == e.target.Ge.position.Q.toFixed(4) &&
            element.pos[1].toFixed(4) == e.target.Ge.position.P.toFixed(4)
        );
        this.setState({ carDialogVisible: true, selectCarObj: selectobj[0] });
      }
    };
  }
  randomMarkers() {
    this.setState({
      markers: randomMarker(1000)
    });
  }
  componentDidMount() {
    // this.randomMarkers();
    console.log(this.props.onlyMarker);
  }
  setOnMarkerHandler(item) {
    // console.log(item.carObj);
    let arr = this.state.selectCarList;
    arr.push(item);
    this.setState({
      activeMarker: { longitude: item.pos[0], latitude: item.pos[1] },
      center: { longitude: item.pos[0], latitude: item.pos[1] },
      selectCarList: arr
    });
  }
  handleCancel() {
    this.setState({ carDialogVisible: false });
  }
  render() {
    const styleC = {
      background: `url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/map-marker-icon.png')`,
      backgroundSize: "contain",
      backgroundRepeat: "no-repeat",
      backgroundPosition: "center",
      width: "30px",
      height: "40px",
      color: "#000",
      textAlign: "center",
      lineHeight: "40px"
    };
    return (
      <div style={{ height: "100%" }}>
        {this.props.onlyMarker && this.props.onlyMarker.length ? (
          // 全景图marker
          <Map
            amapkey={"33be8ed10bf050df2a07343b9fcf8b79"}
            mapStyle="amap://styles/light"
            zoom="7"
            center={{
              longitude: this.props.onlyMarker[0],
              latitude: this.props.onlyMarker[1]
            }}
          >
            <Marker
              position={{
                longitude: this.props.onlyMarker[0],
                latitude: this.props.onlyMarker[1]
              }}
            >
              <div style={styleC} />
            </Marker>
          </Map>
        ) : (
          <Map
            amapkey={"33be8ed10bf050df2a07343b9fcf8b79"}
            mapStyle="amap://styles/light"
            zoom="7"
            center={this.state.center}
          >
            <Markers markers={this.state.markers} />
            <Marker
              position={this.state.activeMarker}
              clickable
              events={this.markerEvents}
            >
              <div style={styleC} />
            </Marker>
            <Marker />
          </Map>
        )}
        <CarallDialog
          visible={this.state.carDialogVisible}
          carObj={this.state.selectCarObj}
          handleCancel={this.handleCancel.bind(this)}
        />
      </div>
    );
  }
}

export default JMap;
